import React, { Component ,Fragment} from 'react';

import P0 from './P0';
import P1 from './P1';
//import P2 from './P2';
import P3 from './P3';
import P4 from './P4';
//import P5 from './P5';
import P5_6 from './P5_6';
import P6 from './P6';
import P7 from './P7';
import P8 from './P8';
import P9 from './P9';
import P10 from './P10';
import First from './First';

import {loadPage,doLMSGetValue,doLMSSetValue,doLMSCommit} from './AWI';

require('./css/frame.css');

const pages=[First,P0,P1,P3,P4,P5_6,P6,P7,P8,P9,P10];
const flag=pages.map((item,i)=>{
    if(i === 0){
        return 2;
    }else{
        return 0;
    }
});
let anflag=[0,0];
export default  class Course extends React.Component {
	constructor(...args){
		super(...args);
		this.state={
			showpage:false,
			index:0,
		};


	}
	componentDidMount(){
		setTimeout( () =>{
            let str=flag.join('_');
            loadPage(str,'2');
            var status = doLMSGetValue( "cmi.core.lesson_status" );
            var susdata = doLMSGetValue("cmi.suspend_data");
		},2000);


	}
	componentWillUnmount(){
		let status=this.doLMSGetValue( "cmi.core.lesson_status" );
        doLMSCommit();
		unloadPage(status);
	}

	LR (type) {
		let index=this.state.index;
		if(type === 'L'){
			index=index-1;
		}
		if(type === 'R'){
			index=index+1;
		}
		if(index === 11){

        }

        this.goPage(index);
	}
    goPage(i){
        this.setState({index:i});
        flag[i]=2;
        let str=flag.join('_');
        var susdata = doLMSSetValue( "cmi.suspend_data",str);
        if(str.indexOf('0') ===-1){
            doLMSSetValue( "cmi.core.lesson_status", "completed" );
            doLMSCommit();
		}
    }
    setAnflag(i){
        anflag[i]=1;
    }

	render(){
		const {index } = this.state;
		const Current = pages[index];
		return (
            <div id="root">
				<LRButton LR={this.LR.bind(this)} index={index} />
				<Current  goPage={this.goPage.bind(this)}  setAnflag={this.setAnflag.bind(this)}/>
				<Footer index={index} goPage={this.goPage.bind(this)}/>
            </div>
		);
	}
	
}

const titles=[
	"进入课程",
	"目录",
	"众智APP产品介绍",
	/*"4、众智APP产品介绍",*/
	/*"5、手机、车机连接",*/
	"手机、车机连接",
	"手机、车机连接",
	"步行导航",
	"步行导航",
	"地图更新",
	"我的行程",
	"课程测试",
	"完成课程",
];

const thumb =[
	"./img/small/p_0.jpg",
	"./img/small/p_1.jpg",
	"./img/small/p_2.jpg",
	/*"./img/small/p_3.jpg",*/
	"./img/small/p_4.jpg",
	"./img/small/p_5.jpg",
	"./img/small/p_7.jpg",
	"./img/small/p_8.jpg",
	"./img/small/p_9.jpg",
	"./img/small/p_10.jpg",
	"./img/small/p_11.jpg",
	"./img/small/p_12.jpg",

];

class Footer extends Component{
    constructor(props) {
        super(props);
        this.state={
            showImg:false,
            overIndex:0,
            showHelp:false,
        }

    }

	onClick(i){
	    this.props.goPage(i);
    }
    onOver(i){
        this.setState({
            overIndex:i,
            showImg:true,
        })
    }
    onLeave(i){
        this.setState({
            showImg:false,
        })
    }

    showThum(i){

        let leftpos = 180 + i * 19 + "px";
        return (<div id="tipimg" style={{"left":leftpos}}>
            <img id="small" src={require(thumb[i]+'')} />
        </div>);
    }

    onHelp(){
        let showHelp = !this.state.showHelp;

        this.setState({
            showHelp
        })
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.index !== this.props.index){
            this.setState({
                showHelp:false
            })
        }
    }


	render(){
		const {index,goPage}=this.props;
		const {showImg,overIndex,showHelp} =this.state;
		return (
			<div>
				 <p className="wd">
					服务技术培训部
				</p>

				<div className="help" style={{right: "40px"}} onClick={this.onHelp.bind(this)}>帮助&gt;</div>
                {showHelp && <div className="helpdiv">
                    <img src={require("./img/help.png")}/>
                    <p style={{top: "54px"}}>色点（热点）包含文本或图片形式的附加信息 </p>
                    <p style={{top: "107px"}}>这里显示需要特别注意的信息 </p>
                    <p style={{top: "210px"}}>您可以通过屏幕下方的按钮来选择各张幻灯片 </p>
                    <p style={{top: "280px"}}>您可以点击回到上一页幻灯片，或进入下一页幻灯片</p>
                    <p style={{top: "410px"}}>您可以点击回到上一页幻灯片，或进入下一页幻灯片</p>
                </div>
                }

				<ul className="simg">
                    {
                        titles.map( (item,i) => {

                            let srcimg= (index == i) ?'ron' :'roff';
                            return  (<li title={(i+1)+'、'+item}  idx={index} key={i}
                                             onClick={this.onClick.bind(this,i)}
                                             onMouseOver={this.onOver.bind(this,i)}
                                             onMouseOut={this.onLeave.bind(this,i)}

                                        >
                                    <img src={require("./img/"+srcimg+".png")} />
                                </li>)

                        })
                    }

				</ul>
                { showImg && this.showThum(overIndex)}
			</div>
		)
	}
}


class LRButton extends Component {
  constructor(...args){
    super(...args);
  }

  render(){

    if(this.props.index === 1) {
      return (
        <div id="R" className="LR" style={{right: "10px"}} onClick = {() =>{this.props.LR("R")}}>&gt;</div>
      );
    }
    else if(this.props.index === titles.length-1) {
      return (
        <div id="L" className="LR" style={{left: "10px"}} onClick = {() =>{this.props.LR("L")}}>&lt;</div>
      );
    }
    else {
      return (
        <div>
          <div id="L" className="LR" style={{left: "10px"}} onClick = {() =>{this.props.LR("L")}}>&lt;</div>
          <div id="R" className="LR" style={{right: "10px"}} onClick = {() =>{this.props.LR("R")}}>&gt;</div>
        </div>
      );
    }

  }

}

